<template>
  <el-row>
    <el-col :span="24" v-if="value && !edit">
      <el-image
        :src="value"
        :style="`width:200px;height:80px;`"
        fit="cover"
        :preview-src-list="[value]"
      >
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
    </el-col>
    <el-col :span="24" v-if="edit">
      <vueSignature ref="signature" :sigOption="sigOption" :w="'100%'" :h="'400px'"></vueSignature>
    </el-col>
    <el-col>
      <el-button size="mini" @click="edit=!edit">{{edit?'返回':'编辑签名'}}</el-button>
      <el-button size="mini" @click="save" type="primary" v-if="edit">确认</el-button>
      <el-button size="mini" @click="clear" v-if="edit">清空</el-button>
      <el-button size="mini" @click="undo" v-if="edit">回退</el-button>
    </el-col>
  </el-row>

</template>

<script>
import vueSignature from "vue-signature";

export default {
  name: "signBoard",
  components:{
    vueSignature
  },
  model: {
    prop: "value",
    event: "update"
  },
  props: {
    value: String
  },
  data() {
    return {
      edit: false,
      sigOption: {
        penColor:"rgb(0, 0, 0)",
        backgroundColor:"rgb(220,220,220)"
      },
    }
  },
  methods: {
    save(){
      const png = this.$refs.signature.save()
      this.$emit('update', png)
      this.edit = false
    },
    clear(){
      this.$refs.signature.clear();
    },
    undo(){
      this.$refs.signature.undo();
    },
  }
}
</script>

<style scoped>

</style>
